import {Component} from "@angular/core";
import {Observable} from "rxjs";
import {Store} from "@ngrx/store";
import {INCREMENT, DECREMENT, RESET, ADD_INFO} from "./counter";

interface AppState {
  counter: number
}

@Component({
  selector: 'ngrx-counter',
  template: `
  <h4>@ngrx/store counter</h4>
<button (click)="decrement()">-</button>
<span>Current Count: {{counter$ | async}}</span>
<button (click)="increment()">+</button>
<button (click)="reset()">Reset</button>
<div>{{info$ | async | json}}</div>
`
})
export class NgrxCounterComponent {
  counter$: Observable<number>
  operate$: Observable<any>
  info$: Observable<any>

  private i = 0

  constructor(private store: Store<number>) {
    this.counter$ = this.store.select<number>('counter')
    this.operate$ = this.store.select('operate')
    this.info$ = this.store.select('info')

    /*
     Observable.combineLatest(this.counter$, this.operate$, (c, o) => {
     return `counter: ${c}, op: ${o}`
     }).subscribe(console.log)
     */

    // this.store.select('combined', 'more', 'person').subscribe(console.log)
  }

  increment() {
    this.store.dispatch({type: INCREMENT})
  }

  decrement() {
    this.store.dispatch({type: DECREMENT})
  }

  reset() {
    this.store.dispatch({type: RESET})

    this.store.dispatch({type: ADD_INFO, payload: {name: 'Brian', framework: `Angular - ${this.i++}`}})
  }
}
